<template>
  <!-- 内容部分 -->
  <div class="container">
    <div class="content">
      <!-- 正在进行 -->
      <h4 class="now"> 正在进行 <el-tag type="info">{{ nowCount }}</el-tag></h4>
      <!-- 进行中任务列表 -->
      <div class="item" v-for="list in nowTodoLists" :key="list.text">
        <el-checkbox v-model="list.isSucceed" :label="list.text" size="large" />
        <el-button type="danger" plain @click="handleDelete(list.text)">删除</el-button>
      </div>
      <!-- 已经完成 -->
      <h4 class="succeed"> 已经完成 <el-tag type="success">{{ succeedCount }}</el-tag></h4>
      <!-- 已经完成任务列表 -->
      <div class="item" v-for="list in succeedTodoLists" :key="list.text">
        <el-checkbox v-model="list.isSucceed" :label="list.text" size="large" />
        <el-button type="danger" plain @click="handleDelete(list.text)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  TodoLists: {
    type: Array,
    requird: true
  }
})

//进行中事项
const nowTodoLists = computed(() => {
  return props.TodoLists.filter(item => !item.isSucceed)
})

//进行中事项数量
const nowCount = computed(() => {
  return nowTodoLists.value.length
})

//已经完成事项
const succeedTodoLists = computed(() => {
  return props.TodoLists.filter(item => item.isSucceed)
})

//已完成事项数量
const succeedCount = computed(() => {
  return succeedTodoLists.value.length
})

const emits = defineEmits(['deleteTodoList'])
//删除数据
const handleDelete = (id) => {
  emits('deleteTodoList', id)
}
</script>

<style lang='scss' scoped>
.container {
  height: calc(100vh - 57px);
  background-color: #f5f5f5;

  .content {
    width: 800px;
    margin: 0 auto;
    height: 100%;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 20px;

    .now {
      color: #606266;
    }

    .succeed {
      color: #67c23a;
    }

    h4 {
      line-height: 50px;
    }

    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #eee;
      align-items: center;
      padding: 2px 15px;
      margin-top: 5px;
      border-radius: 5px;
    }

    .el-checkbox {
      --el-checkbox-checked-text-color: #6528e0;
      --el-menu-active-color: #6528e0;
      --el-checkbox-checked-input-border-color: #6528e0;
      --el-checkbox-checked-bg-color: #6528e0;
      --el-checkbox-input-border-color-hover: #6528e0;
    }
  }
}
</style>